<template>
  <div class="searchBox search-box-layout">
    <Row :gutter="24">
      <Col span="4">
        <div>
          <p class="label">{{ $t('equipmentscrapped.ID') }}</p>
          <div class="ipt">
            <Select
              v-model="searchParams.deviceScrapApplyNo"
              filterable
              @on-change="scrapChange"
              :remote-method="getScrap"
              clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item,index) in scrapNoList"
                      :value="item"
                      :label="item"
                      :key="index"/>
            </Select>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div>
          <p class="label">
            {{ type == 1 ? `${$t('equipmentscrapped.ScrapStatus')}` : `${$t('equipmentscrapped.Status')}` }}</p>
          <div class="ipt">
            <Select v-model="searchParams.status" filterable clearable
                    :placeholder="`请选择${type==1 ? '报废状态':$t('equipmentscrapped.Status')}`">
              <Option v-for="(item,index) of scrapStatusList"
                      :value="item.value"
                      :key="index"
                      :label="item.name">
              </Option>
            </Select>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div>
          <p class="label">{{ $t('equipmentscrapped.EquipmentNo') }}</p>
          <div class="ipt">
            <Select
              filterable
              v-model="searchParams.deviceNo"
              @on-change="deviceNoChange"
              :remote-method="getDeviceNo"
              clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item,index) in deviceNoLists"
                      :value="item.deviceNo"
                      :label="item.deviceNo"
                      :key="index"/>
            </Select>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div>
          <p class="label">{{ $t('equipmentscrapped.Name') }}</p>
          <div class="ipt">
            <Select
              v-model="searchParams.deviceName"
              filterable
              :remote-method="getDeviceName"
              @on-change="deviceNameChange"
              clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item,index) in deviceNameList"
                      :value="item"
                      :label="item"
                      :key="index"/>
            </Select>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div>
          <p class="label">{{ $t('common.Entity') }}</p>
          <div class="ipt">
            <Select v-model="searchParams.companyId" filterable clearable
                    :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item,index) of tagList"
                      :value="item.id"
                      :key="index"
                      :label="item.name">
              </Option>
            </Select>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div>
          <p class="label">{{ $t('equipmentscrapped.Location') }}</p>
          <div class="ipt">
            <Cascader clearable
                      ref="orgCascader"
                      :data="orgList"
                      :value="searchParams.orgId"
                      transfer
                      @on-change="handleCasChange"
                      :placeholder="`${$t('common.selectInfo')}`"></Cascader>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div>
          <p class="label">{{ $t('equipmentscrapped.UsedDept') }}</p>
          <div class="ipt">
            <Input type="text" clearable v-model="searchParams.useDept"
                   :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                   :maxlength="32"></Input>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div>
          <p class="label">{{ $t('equipmentscrapped.CostCenter') }}</p>
          <div class="ipt">
            <Input type="text" clearable v-model="searchParams.deptCostCenter"
                   :placeholder="`${$t('common.inputInfo')}`"
                   class="inputBorder" :maxlength="32"></Input>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div>
          <p class="label">{{ $t('equipmentscrapped.ApplyTime') }}</p>
          <div class="ipt">
            <DatePicker
              :value="searchParams.date"
              @on-change="dateChange"
              format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              :placeholder="`${$t('common.selectInfo')}`"
              :clearable="false"/>
          </div>
        </div>
      </Col>
      <Col span="4">
        <div>
          <p class="label hide-label">--</p>
          <div class="ipt">
            <Button class="search-btn"  v-has="'deviceScrapApplySearch'" type="primary" @click="search">{{ $t('common.Query') }}</Button>
            <Button class="reset-btn" v-has="'deviceScrapApplySearch'" @click="reset" >{{ $t('common.reset') }}</Button>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>

import {findOrgByToken} from "@/api";
import recursion from "@/util/recursion";

let timerNo = null
let timerName = null
let timerScrap = null

export default {
  name: "searchPrams",
  props: ['type', 'ifFinish'],
  data() {
    return {
      searchParams: {},
      deviceNoLists: [],
      scrapNoList: [],
      deviceNameList: [],
      tagList: [],
      orgList: [],
      sourceList: [
        {id: 1, name: '自制'},
        {id: 6, name: '内购'},
        {id: 2, name: '外购'},
        {id: 4, name: '租赁'},
        {id: 5, name: '客供'}
      ],
      scrapList: [
        {value: '1', name: '已提交'},
        {value: '2', name: '撤回'},
        {value: '3', name: '待审批'},
        {value: '4', name: '审批通过'},
        {value: '5', name: '审批不通过'},
        {value: '7', name: '被退回'},
      ],
      scrapApplyList: [
        {value: '3', name: '待审批'},
        {value: '4', name: '审批通过'},
        {value: '5', name: '审批不通过'},
        {value: '7', name: '已退回'},
      ],
      scrapStatusList: []
    }
  },
  mounted() {
    if (this.type / 1 === 1) {
      this.scrapStatusList = this.scrapList
    }
    if (this.type / 1 === 2) {
      if (this.ifFinish === 1) {
        this.scrapStatusList = [
          {value: 4, name: '审批通过'},
          {value: 5, name: '审批不通过'},
          {value: 6, name: '已退回'},
        ]
      }
      if (this.ifFinish === 0) {
        this.scrapStatusList = [{value: 3, name: '待审批'}]
      }
    }

    this.getCompanyList()
    this.getOrgList()
    //this.getDeviceNo()
    //this.getDeviceName()
    this.getScrap()
  },
  methods: {
    reset(){
      this.searchParams = {};
      this.searchParams.orgId = [];
      this.searchParams.date = [];
      this.search();
    },
    search() {
      this.$emit('search', this.searchParams)
    },
    scrapChange(val) {
      this.searchParams.deviceScrapApplyNo = val;
    },
    deviceNoChange(val) {
      this.searchParams.deviceNo = val;
    },
    deviceNameChange(val) {
      this.searchParams.deviceName = val
      // const obj = this.deviceNameList.find(item => item.id === val)
      // if (obj)
      //
      // else
      //   this.searchParams.deviceName = ""
    },
    dateChange(arr) {
      if (Array.isArray(arr) && arr.length > 0) {
        this.searchParams.startTime = arr[0]
        this.searchParams.endTime = arr[1]
      } else {
        delete this.searchParams.startTime
        delete this.searchParams.endTime
      }
    },
    getScrap(val) {
      clearTimeout(timerScrap)
      this.scrapNo = val;
      timerScrap = setTimeout(() => {
        this.axios({
          method: 'get',
          url: '/dms/scrapApply/getApplyNo',
          params: {
            applyNo: val,
          }
        }).then(res => {
          if (this.scrapNo === val) {
            this.scrapNoList = res.data;
          }

        })
      }, 200)
    },
    getDeviceNo(val) {
      clearTimeout(timerNo)
      this.deviceNo = val;
      timerNo = setTimeout(() => {
        this.axios({
          method: 'get',
          url: '/dms/dmsDevice/deviceInfoByOrgId',
          params: {
            deviceNo: val,
            orgId: '',
            deviceName: ''
          }
        }).then(res => {
          if (this.deviceNo === val) {
            this.deviceNoLists = res.data.filter((item) => {
              return item.deviceNo;
            });
          }

        })
      }, 200)
    },
    getDeviceName(val) {
      this.deviceName = val;
      clearTimeout(timerName)
      timerName = setTimeout(() => {
        this.axios({
          method: 'get',
          url: '/dms/dmsDevice/deviceNameListByName',
          params: {
            deviceName: val
          }
        }).then(res => {
          if (this.deviceName === val) {
            this.deviceNameList = res.data;
            this.$forceUpdate()
          }
        })
      })
    },
    handleCasChange(val) {
      this.searchParams.orgId = val[val.length - 1]
    },
    getCompanyList() {
      this.axios({
        method: 'get',
        url: '/basic/company/getCompanyListByUser',
        params: {}
      }).then(res => {
        if (res.code === 200) {
          let arr = res.data.map(item => {
            return {
              ...item,
              id: item.id
            }
          })
          this.tagList = [...this.tagList, ...arr]
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    getOrgList() {
      let params = {
        level: 3
      }
      findOrgByToken(params).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'id',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)


        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
